<template>
	<view class="page-content">
		<u-navbar title="找回密码" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view class="content" :style="'margin-top:' + navH + 'px;'">
			<view class="item">
				<view class="item-input-box">
					<u--input type="number" prefixIcon="phone" v-model="mobile" placeholder="请输入手机号码" border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
				</view>
			</view>
			<view class="item">
				<view class="item-input-box" :class="isMatch == false ? 'arrow_box':''">
					<u--input type="password" prefixIcon="lock-fill" v-model="password" placeholder="请输入新密码"
						border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
				</view>
			</view>
			<view class="item">
				<view class="item-input-box" :class="isMatch == false ? 'arrow_box' : ''">
					<u--input type="password" prefixIcon="lock" v-model="repassword" placeholder="请再次输入密码" border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
				</view>
			</view>
			<view class="item">
				<view class="item-input-box">
					<u--input type="number" prefixIcon="hourglass-half-fill" v-model="code" placeholder="请输入验证码"
						border="none"
						prefixIconStyle="font-size: 22px;color: #909399;border-right:1px solid #C2C2C2;padding-left:10px;padding-right:10px;margin-right:10px;"
						maxlength="11" />
					<view @click="acquire()" style="color: #666666;font-size: 14px;padding-right: 20px;border-radius: 25px;
				   		background-color: #F6F6F8;padding: 5px 10px;align-self: center;margin-right: 5px;">
						{{again_sent ? time+'秒后再获取' : '获取验证码'}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="btn" :class="{'btn-allow':isButton}" @click="submit()">
					提交
				</view>
			</view>
			<view style="width: 100%;padding: 20px;position: relative;">
				<view style="font-size: 16px;color: blue;width: 40px;position: absolute;right: 40px;text-align: center;"
					@click="reset">
					重置
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		retrieve_pwd,
		get_code
	} from '@/api/public.js'
	export default {
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				mobile: '',
				code: '',
				password: '',
				repassword: '',
				again_sent: false,
				time: 180, //验证码倒计时
				isButton: false, //表单填完内容 高亮提交按钮
				isMatch: true
			}
		},
		watch: {
			repassword(newVal, oldVal) {
				if (newVal != this.password) {
					this.isMatch = false;
				} else {
					this.isMatch = true;
				}
			},
			mobile(res) {
				this.isButton = !this.verifyData()
			},
			code(res) {
				this.isButton = !this.verifyData()
			},
			password(res) {
				this.isButton = !this.verifyData()
			},
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;

		},
		methods: {
			verifyData() {
				let formData = [this.mobile, this.code, this.password]
				return formData.some(val => !val.length)
			},
			// 获取验证码
			acquire() {
				//校验手机号是否正确，才执行获取验证码
				if (!uni.$u.test.mobile(this.mobile)) {
					uni.$u.toast('手机号格式不对')
					return false
				}
				if (this.again_sent) {
					return false
				}
				var _this = this;
				_this.time = 180;
				get_code({
					mobile: _this.mobile,
					type: 2
				}).then((res2) => {
					_this.again_sent = true;
					var intervalID = setInterval(function() {
						--_this.time;
						if (_this.time <= 0) {
							clearInterval(intervalID);
							_this.again_sent = false;
						}
					}, 1000)
				})
			},
			submit() {
				var _this = this;
				if (_this.password != _this.repassword) {
					return _this.$util.Tips({
						title: '两次输入的密码不一致，请重新输入'
					});
				}
				if (!_this.isButton) {
					uni.$u.toast('内容还没填完')
					return false
				}
				if (!uni.$u.test.mobile(_this.mobile)) {
					uni.$u.toast('手机号格式不对')
					return false
				}

				retrieve_pwd({
					mobile: _this.mobile,
					code: _this.code,
					password: _this.password,
				}).then((res) => {
					console.log(res)
					if (res.status == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						setTimeout(res => {
							uni.navigateBack()
						}, 2000)
					} else if (res.status != 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			reset() {
				this.mobile = '';
				this.code = '';
				this.password = '';
				this.repassword = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		background-color: #FFFFFF !important;
	}

	.page-content {
		background-color: #FFFFFF;
		height: 100vh;

		.content {
			width: 100%;
			padding: 40rpx;

			.item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				&:first-child {
					margin-top: 60px;
				}

				.arrow_box {
					animation: glow 800ms ease-out infinite alternate;
				}

				@keyframes glow {
					0% {
						border-color: $theme-color;
						box-shadow: 0 0 5px rgba(255, 0, 0, 0.6), inset 0 0 5px rgba(255, 179, 176, 0.1), 0 1px 0 $theme-color;
					}
					100% {
						border-color: $theme-color;
						box-shadow: 0 0 10px rgba(255, 0, 0, 0.6), inset 0 0 10px rgba(255, 213, 196, 0.4), 0 1px 0 $theme-color;
					}
				}

				.item-input-box {
					margin: 0 auto;
					width: 300px;
					border-radius: 40px;
					border: 1px solid #CDE6FA !important;
					height: 50px;
					display: flex;
				}

			}

			.bottom {
				width: 100%;
				height: 90upx;
				margin-top: 50upx;
				line-height: 90upx;

				.btn {
					border-radius: 40px;
					width: 300px;
					height: 80rpx;
					line-height: 80rpx;
					margin: 0 auto;
					background-color: #BDBDBD;
					color: #FFFFFF;
					text-align: center;
					font-size: 30rpx;

					&:after {
						border: none;
					}
				}

				.btn-allow {
					background-color: $theme-color;
				}
			}

		}
	}
</style>
